import { onMounted, onUnmounted } from "vue"

/**
 * 监听浏览器的页面尺寸变化
 * @param callback 页面尺寸发生改变的回调
 * @param delay 防抖延迟时间(毫秒)
 */
export  const useResize = (callback:(e:Event)=>void,delay:number = 0) =>{

    onMounted(()=>{
    
       window.addEventListener("resize",resize)
    })

    let timer:number | undefined;
    const resize = (e:Event):void =>{
       if (timer) clearTimeout(timer)

       timer = setTimeout(() => {
        callback(e)
       }, delay);
       
    }
    onUnmounted(()=>{
        window.removeEventListener("resize",resize)
    })

}